<template>
  <div class="mod-home">
    <div class="dashboard-cards">
      <div class="card">
        <div class="card-title">今日销售额</div>
        <div class="card-value">￥{{ todaySales }}</div>
      </div>
      <div class="card">
        <div class="card-title">总销售额</div>
        <div class="card-value">￥{{ totalSales }}</div>
      </div>
      <div class="card">
        <div class="card-title">好评率</div>
        <div class="card-value">{{ goodRate }}%</div>
      </div>
      <div class="card">
        <div class="card-title">注册用户</div>
        <div class="card-value">{{ userCount }}</div>
      </div>
      <div class="card">
        <div class="card-title">日活用户</div>
        <div class="card-value">{{ dau }}</div>
      </div>
    </div>
    <div class="dashboard-charts">
      <v-chart :option="salesChartOption" style="height:300px;width:100%;" />
      <v-chart :option="userChartOption" style="height:300px;width:100%;margin-top:30px;" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { use } from "echarts/core"
import VChart from "vue-echarts"
import { CanvasRenderer } from "echarts/renderers"
import { BarChart, LineChart } from "echarts/charts"
import { GridComponent, TooltipComponent, LegendComponent, TitleComponent } from "echarts/components"

use([
  CanvasRenderer,
  BarChart,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
])

// 假数据
const todaySales = ref(12345.67)
const totalSales = ref(987654.32)
const goodRate = ref(98.5)
const userCount = ref(12345)
const dau = ref(2345)

// 销售额图表
const salesChartOption = ref({
  title: { text: '最近7天销售额', left: 'center' },
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['周一','周二','周三','周四','周五','周六','周日']
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: '销售额',
      type: 'bar',
      data: [12000, 15000, 18000, 11000, 17000, 21000, 12345]
    }
  ]
})

// 用户数据图表
const userChartOption = ref({
  title: { text: '最近7天日活用户', left: 'center' },
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['周一','周二','周三','周四','周五','周六','周日']
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: '日活用户',
      type: 'line',
      data: [2000, 2200, 2100, 2300, 2500, 2400, 2345]
    }
  ]
})
</script>

<style lang="scss" scoped>
.mod-home {
  padding: 30px;
  .dashboard-cards {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    .card {
      flex: 1;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px #f0f1f2;
      padding: 20px;
      text-align: center;
      .card-title {
        font-size: 16px;
        color: #888;
        margin-bottom: 10px;
      }
      .card-value {
        font-size: 28px;
        font-weight: bold;
        color: #409EFF;
      }
    }
  }
  .dashboard-charts {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px #f0f1f2;
    padding: 20px;
  }
}
</style>
